<script setup>
  import NavBar from './components/navbar/NavBar.vue'
</script>

<template>
  <div class="layout-demo">
    <a-layout style="height: 100vh;">
      <a-layout-header>
        <NavBar/>
      </a-layout-header>
      <a-layout-content>
        <RouterView/>
      </a-layout-content>
      <a-layout-footer>Copyright©2024 by xccit </a-layout-footer>
    </a-layout>
  </div>
</template>

<style scoped>
.layout-demo :deep(.arco-layout-header),
.layout-demo :deep(.arco-layout-footer),
.layout-demo :deep(.arco-layout-sider-children),
.layout-demo :deep(.arco-layout-content) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--color-white);
  font-size: 16px;
  font-stretch: condensed;
  text-align: center;
}


/* .layout-demo :deep(.arco-layout-header), */
.layout-demo :deep(.arco-layout-footer) {
  height: 64px;
  background-color: var(--color-primary-light-4);
}

.layout-demo :deep(.arco-layout-sider) {
  width: 206px;
  /* background-color: var(--color-primary-light-3); */
}
/* .layout-content {
  margin: 0 auto;
  align-self: center;
} */
</style>
